import React from 'react'
import root from '../..';

export default function Demo() {
  const [count,setCount]=React.useState(0)
  const [name,setName]=React.useState('Jack')
  React.useEffect(()=>{
    //此处可以发送请求，订阅消息
    let timer=setInterval(()=>{
      setCount(count+1)
    },1000)
    return ()=>{//此处的return相当于componentWillUNmount，即卸载组件时的操作，关闭定时器...
      clearInterval(timer)
    }
  },[count]) //数组参数如果不写就是不管任何状态改变都执行其中的代码，如果写[]是不监听任何状态改变，[count]只监听count状态的改变
  function add(){
    setCount(count+1)
  }
  function change(){
    setName("Mark")
  }
  function unmount(){
    root.unmount()
  }
  return (
    <div>
      <h1>count值为:{count}</h1>
      <h1>name值为:{name}</h1>
      <button onClick={add}>+1</button>
      <button onClick={change}>change</button>
      <button onClick={unmount}>unmount</button>
    </div>
  )
}
